<template>
  <div class="yc-table">
    <!-- todo找到能修改插槽的方法 -->
    <yc-table
      :tableData="dataList"
      v-bind="contentConfig"
      :data-count="count"
      :pageSizes="pageSizes"
      @handle-size-change="handleSizeChange"
      @handle-current-page="handleCurrentPage"
      @del-click="delClick"
      @edit-click="editClick"
    >
      <!-- table头部的操作插槽 -->
      <template #header-handler>
        <el-button @click="headerHandlerClick" v-if="isCreate" type="primary" :icon="Plus">
          {{ headerBntTxt }}
        </el-button>
      </template>

      <template #createAt="{ prop }">
        <!-- 全局配置一个方法实现格式化日期 -->
        <span>{{ $filters.formatTime(prop.createAt, 'YYYY/MM/DD HH:mm:ss') }}</span>
      </template>
      <template #updateAt="{ prop }">
        <!--
            全局自定义指令实现格式化日期
            $filters.formatTime(prop.updateAt, 'YYYY/MM/DD HH:mm:ss')
          -->
        <span v-dateFormat="format">{{ prop.updateAt }}</span>
      </template>

      <!-- 插槽嵌套 -->
      <template v-for="item in otherPropSlots" :key="item.prop" #[item.slotName]="{ prop }">
        <!-- 跨组件插槽 -->
        <template v-if="item.slotName">
          <slot :name="item.slotName" :prop="prop"></slot>
        </template>
      </template>

      <!--BUG 进度条 -->
      <!-- <el-input-number
            v-model="scoped.prop.progress"
            :min="0"
            :max="10"
            :precision="2"
            :step="0.1"
          /> -->
    </yc-table>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useStore } from '@/store'
import ycTable from '@/base-ui/table/src/table.vue'

import { Plus } from '@element-plus/icons-vue'

import { ITable } from '../../table/types'
import { usePageContent } from '@/hooks/usePageContent'
import { usePermission } from '@/hooks/usePermission'

defineExpose({
  getPageData //抛出方法 获取数据的方法
})
interface Props {
  contentConfig: ITable
  pageName: string
  headerBntTxt?: string
  pageSizes?: any[]
}
const props = withDefaults(defineProps<Props>(), {
  headerBntTxt: '新建用户'
})

const store = useStore()
const emit = defineEmits(['headerHandlerClick', 'editClick'])

// 获取操作的权限
const isCreate = usePermission(props.pageName == 'user' ? 'users' : props.pageName, 'create')
const isUpdate = usePermission(props.pageName == 'user' ? 'users' : props.pageName, 'update')
const isDelete = usePermission(props.pageName == 'user' ? 'users' : props.pageName, 'delete')
const isQuery = usePermission(props.pageName == 'user' ? 'users' : props.pageName, 'query') //查询是否有发送请求权限

//todo hook 分页器的hook
const { currentPage, pageSize, handleSizeChange, handleCurrentPage } = usePageContent(getPageData)
function getPageData(queryInfo: any = {}) {
  if (!isQuery) return
  store.dispatch('system/getPageListAction', {
    pageName: props.pageName,
    queryInfo: {
      offset: (currentPage.value - 1) * pageSize.value,
      size: pageSize.value,
      ...queryInfo
    }
  })
}
getPageData()
// const userList = computed(() => store.state.system.userList)
const dataList = computed(() => store.getters['system/pageListData'](props.pageName))
const count = computed(() => store.getters['system/pageListCount'](props.pageName))

const format = ref('YYYY-MM-DD:HH:mm:ss')

// 获取其他的动态插槽名称
const defineSlots = ['createAt', 'updateAt'] //默认插槽
const otherPropSlots = props.contentConfig.tablePropList.filter((item) => {
  for (const defineSlot of defineSlots) {
    if (item.slotName === defineSlot) return false
  }
  return true
})

// 删除/编辑/新建操作
function delClick(row: any) {
  store.dispatch('system/deletePageDataAction', { pageName: props.pageName, id: row.id })
}
function editClick(row: any) {
  emit('editClick', row)
}

function headerHandlerClick() {
  emit('headerHandlerClick')
}
</script>

<style lang="less" scoped>
.yc-table {
  border-top: 20px solid #f5f5f5;
  padding: 20px;
}
</style>
